{% extends "../layouts/login.html" %} 
{% block content %}

<div class="overlay"></div>
<div class="center-wrapper">
	<div class="center-content">
		<div class="row no-m">
			<div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
				<div class="form-login">

				<h2>{{config.setup.appName }}</h2>
				<form id="loginForm" action="/system/user/login" data-parsley-validate="" novalidate="" role="form" method="post">
					<input type="hidden" id="captcha" name="captcha">
					<div class="unit mb25">
						<i class="icon ti-user"></i>
						<input type="text" id="username" name="username" value="" required  placeholder="输入用户名">
					</div>
					<div class="unit">
						<i class="icon ti-lock"></i>
						<input type="password" id="password" name="password" value="" required  placeholder="输入密码">
					</div>
					<p id="tip" class="bg-danger p10 mt10" style="display:none"></p>
					<div class="unit">

						<button class="btn btn-primary btn-lg btn-block" type="submit" data-loading-text="登录中...">
                  登录系统
                </button>
                

					</div>
				</form>
			</div>
				<p class="text-center text-default footer">
					Copyright &copy;
					<span id="year" class="mr5"></span>
					<span>{{ config.setup.appShortName }}</span>
				</p>
			</div>
		</div>

	</div>
</div>
<!-- 验证码 -->
<div id="dialogVeryCode" class="modal fade bs-modal-sm" tabindex="-3" role="dialog" aria-hidden="false">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" style="color:black;">请输入验证码
        </h4>
			</div>
			<div class="modal-body">
				<form id="f2" onsubmit="return false;" data-parsley-validate="" novalidate="">
					<div class="row">
						<div class="col-xs-2"></div>
						<div class="col-xs-6">
							<input type="text" id="verifycode" required class="form-control input-lg" placeholder="验证码">
						</div>
						<div class="col-xs-4">

							<div id="captchaimg" style="height:46px;cursor: pointer;" onclick="captcha" />
						</div>
					</div>
			</div>
			</form>
		</div>
		<div class="modal-footer">
			<button id="ok" type="button" class="btn btn-primary" data-dismiss="modal">登录系统
        </button>
		</div>
	</div>
</div>
</div>

<script type="text/javascript">
	$(document).ready(function() {
		$("#year").html(new Date().getFullYear());
		$("#loginForm").ajaxForm({
			dataType: 'json',
			beforeSubmit: function(arr, form, options) {
				form.find("button:submit").text("登录中...");
				form.find("button:submit").attr("disabled", "disabled");
			},
			success: function(data, statusText, xhr, form) {
				console.log(data)
				if(data.errno == 0) {
					$("#tip").hide();
					form.find("button:submit").text("登录系统");
					window.location.href = "/system/unit/index";
				} else if(data.errno == 1002) {
					$("#verifycode").val("");
					$.get('/system/user/captcha?_=' + new Date().getTime(), function(data) {
						$("#captchaimg").html(data);
						return $("#dialogVeryCode").modal({
							show: true,
							backdrop: 'static',
							keyboard: false
						});
					});

				} else {
					$("#captcha").val("");
					$.get('/system/user/captcha?_=' + new Date().getTime(), function(data) {
						$("#captchaimg").html(data);

					});
					$("#tip").html(data.errmsg);
					$("#tip").fadeIn();
					form.find("button:submit").text("登录系统");
					form.find("button:submit").removeAttr("disabled")

				}
			}
		});
		$("#ok").on("click", function() {
			if($("#verifycode").val() == "") {
				$("#f2").submit();
				return false;
			}
			$("#captcha").val($("#verifycode").val());
			$("#loginForm").submit();
		});
		$("#dialogVeryCode").on("keypress", function(event) {
			var key = event.which;
			if(key == 13) {
				$("#ok").trigger("click");
			}
		});
		$("#username").focus();
	});
</script>
{% endblock %}